import React, { Component, Fragment } from 'react'
import { NavBar, Icon } from "antd-mobile"
import "./pay.scss"
import Img from "../../assets/images/pay.png"
let PayNav = () => {
  return <div className="PayHeader">
    <NavBar
      className="PayNav"
      icon={<Icon type="left" />}
      onLeftClick={() => window.history.go(-1)}
    >
      填写订单
    </NavBar>
  </div>
}
let OrderAdd = (props) => {
  return (
    <div className="oWrap orderAdd">
      <div className="showAddAddress">
        <div className="addNew" onClick={props.handleClickAddress}>
          新建收货地址以确保商品正常派送哦~
        </div>
      </div>
    </div>
  )
}
let OrderCom = (props) => {
  return <div className="oWrap orderCom">
    <div className="oWrapHead">
      <i>
        <img src="https://misc.jiuxian.com/logo/logo_30_30.png" />
      </i>
      <span>酒仙自营</span>
    </div>
    <ul>
      {props.carts && props.carts.map((v, i) => (
        <li className="comItem clearfix" key={i}>
          <div className="comPic">
            <img src={v.imgList} />
          </div>
          <div className="comName">
            <p className="name">
              <span>{v.name}*{v.num}</span></p>
            <p className="tex">
            </p>
          </div>
          <div className="comPri"><p className="pri">¥{v.num * v.price}</p><p className="num">x{v.num}</p></div>
        </li>
      ))}
    </ul>
    {props.carts && props.Carts.length > 2 ? (< div className="comBtn" onClick={props.handleClick}>
      <span>查看全部{props.Carts.length}件商品</span>
    </div>) : (<div></div>)
    }
  </div >
}
let OWrap = (props) => {
  return <Fragment>
    <div className="oWrap">
      <div className="oItem">
        <li>
          <div className="itemName">支付方式</div>
          <div className="itemInfo">
            <label className="iiItems" id="onLine">
              <input type="radio" name="zf" id="onLine" />
              <span>在线支付</span>
            </label>
            <label className="iiItems" id="notOnLine">
              <input type="radio" name="zf" id="notOnLine" />
              <span>货到付款</span>
            </label>
          </div>
        </li>
      </div>
      <div className="noBor">
        <div className="itemName">发票信息</div>
        <p className="two">不需要发票</p>
      </div>
      <div className="noBor">
        <div className="itemName">优惠券</div>
        <p className="two">无优惠券可用</p>
      </div>
      <div className="noBor">
        <div className="itemName">返&nbsp;&nbsp;&nbsp;&nbsp;现</div>
        <p className="two">暂无可用</p>
      </div>
      <div className="noBor">
        <div className="itemName">商品金额</div>
        <p className="two red">￥{props.totalPrice}</p>
      </div>
      <div className="noBor">
        <div className="itemName">运费</div>
        <p className="two red">+&nbsp;&nbsp;￥0.00</p>
      </div>
      <div className="botAddress"></div>
    </div>
  </Fragment>
}
let Bottom = (props) => {
  return <div className="bottom">
    <div className="bottomleft">
      <em>应付金额：</em>
      <i>￥{props.totalPrice}</i>
    </div>
    <div className="bottomright" onClick={props.showTost}>
      <button>提交订单</button>
    </div>
  </div>
}
export default class pay extends Component {
  state = {
    carts: null,
    totalPrice: 0,
    num: 0,
    listBool: true,
    showTost: "none"
  }
  // 商品总价计算
  calcTotalPrice = () => {
    let totalPrice = 0;
    this.state.carts.forEach(v => {
      if (v.checked) {
        totalPrice += v.price * v.num;
      }
    })
    this.setState({
      totalPrice
    })
  }
  // 计算商品数量
  calcSum = () => {
    let sum = this.state.carts.length;
    this.setState({
      sum
    })
  }
  //点击显示隐藏
  handleClick = () => {
    if (this.state.carts.length >= 2) {
      if (this.state.listBool) {
        let carts_list = [];
        carts_list.push(this.state.carts[0])
        carts_list.push(this.state.carts[1])
        this.setState({
          carts: carts_list,
          listBool: !this.state.listBool
        })
      } else {
        this.setState({
          carts: this.carts,
          listBool: !this.state.listBool
        })
      }
    }
  }
  componentDidMount () {
    let carts_str = localStorage.getItem("buyNow");
    let carts = JSON.parse(carts_str || "[]");
    carts = carts.filter(v => {
      return v.checked === true
    })
    this.carts = Object.assign([], carts);
    this.setState({
      carts
    }, () => {
      //计算商品总价
      this.calcTotalPrice()
      //计算商品总数
      this.calcSum()
      this.handleClick()
    })
  }
  //showTost
  showTost = () => {
    if (this.state.showTost === "none") {
      this.setState({
        showTost: "block"
      })
    } else {
      this.setState({
        showTost: "none"
      })
    }
  }
  handleClickAddress = () => {
    this.props.history.push("/Address")
  }

  render () {
    return (
      <div className="pay">
        <PayNav></PayNav>
        <OrderAdd handleClickAddress={this.handleClickAddress} {...this.state}></OrderAdd>
        <OrderCom {...this.state} handleClick={this.handleClick} Carts={this.carts}></OrderCom>
        <OWrap {...this.state}></OWrap>
        <Bottom {...this.state} showTost={this.showTost}></Bottom>
        <div className="showTost" style={{ display: this.state.showTost }}>
          <img src={Img} alt="" />
        </div>
        <button className="showTostBtn" style={{ display: this.state.showTost }} onClick={this.showTost}>X</button>
      </div>
    )
  }
}